<template>
  <div class="page_root" :key="queryUpdateFlag" data-page-name="年度目标" data-page-identification="y_ixrjghk0jh">
    <a-spin :spinning="pageLoading.loading" :tip="pageLoading.tip">
      <!-- begin vid_mcn9x7w7kh 自定义模板_oke8qhhw3i -->
      <div class="body">
        <div class="main">
          <div class="table-tip">
            <div class="left-top">
              <div class="tip-title"
                ><svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" viewBox="0 0 16 16" version="1.1">
                  <title>年度目标</title>
                  <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <g id="年度目标表" transform="translate(-263, -109)">
                      <g id="编组-9" transform="translate(263, 107)">
                        <g id="年度目标" transform="translate(0, 2)">
                          <rect id="矩形" x="0" y="0" width="16" height="16" />
                          <g id="编组" fill="#3875FF" fill-rule="nonzero">
                            <polygon
                              id="路径"
                              points="12.0679421 0.887967102 9.69497586 3.00432684 9.42320758 5.39560164 6.16942607 8.19481495 7.11889862 9.21952441 10.3057393 6.28271053 12.8137315 6.35136778 15.1861255 4.09826569 16 3.34675487 12.9496156 3.14078312 13.1524406 0"
                            />
                            <path
                              d="M7.25449669,5.87305561 C6.10219918,5.87305561 5.08492759,6.82967996 5.08492759,8.05864473 C5.08492759,9.28760951 6.03411407,10.1755766 7.25449669,10.1755766 C8.40650814,10.1755766 9.35598069,9.21923833 9.35598069,8.05864473 L7.25449669,8.05864473 L7.66071876,5.94171286 C7.52569283,5.87305561 7.39009476,5.87305561 7.25449669,5.87305561 L7.25449669,5.87305561 Z"
                              id="路径"
                            />
                            <path
                              d="M10.8475594,7.99027356 C10.8475594,9.97046308 9.22009655,11.609941 7.25449669,11.609941 C5.28832469,11.609941 3.66114786,9.97074915 3.66114786,7.99027356 C3.66114786,6.00979796 5.28832469,4.37060611 7.25421062,4.37060611 C7.5259789,4.37060611 7.72851779,4.37060611 8,4.43926336 L8.74578938,0.81902378 C8.27148221,0.750652601 7.79631682,0.682281423 7.25421062,0.682281423 C3.25463973,0.682281423 0,3.96066512 0,7.98998748 C0,12.0190238 3.25463973,15.2974075 7.25421062,15.2974075 C11.1868407,15.2974075 14.3728232,12.1557661 14.5087073,8.2634722 L14.5087073,8.05835866 L10.8475594,7.98970141 L10.8475594,7.99027356 Z"
                              id="路径"
                            />
                          </g>
                        </g>
                      </g>
                    </g>
                  </g></svg
                >年度目标</div
              >
            </div>
            <div class="right-top"
              ><div class="tip1" v-for="(item, index) in tipList"
                ><span class="tip-msg">{{ item.title }}</span
                ><div class="box1" :style="{ backgroundColor: item.color }"></div
              ></div>
            </div>
          </div>
          <div class="no-data-img" v-if="state.radioValue === ''">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="265px" height="192px" viewBox="0 0 265 192" version="1.1">
              <title>暂无待办事项</title>
              <defs>
                <linearGradient x1="50%" y1="85.1278551%" x2="50%" y2="-24.3022005%" id="linearGradient-1">
                  <stop stop-color="#3875FF" stop-opacity="0" offset="0%" />
                  <stop stop-color="#3875FF" stop-opacity="0.2" offset="100%" />
                </linearGradient>
                <linearGradient x1="50%" y1="85.1278551%" x2="50%" y2="-24.3022005%" id="linearGradient-2">
                  <stop stop-color="#3875FF" stop-opacity="0" offset="0%" />
                  <stop stop-color="#3875FF" stop-opacity="0.2" offset="100%" />
                </linearGradient>
                <linearGradient x1="50%" y1="85.1278551%" x2="50%" y2="-24.3022005%" id="linearGradient-3">
                  <stop stop-color="#3875FF" stop-opacity="0" offset="0%" />
                  <stop stop-color="#3875FF" stop-opacity="0.2" offset="100%" />
                </linearGradient>
                <linearGradient x1="50%" y1="50%" x2="50%" y2="-4.79965365%" id="linearGradient-4">
                  <stop stop-color="#3875FF" stop-opacity="0" offset="0%" />
                  <stop stop-color="#3875FF" stop-opacity="0.1" offset="100%" />
                </linearGradient>
                <linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradient-5">
                  <stop stop-color="#9CBEF7" offset="0%" />
                  <stop stop-color="#96D1F7" offset="100%" />
                </linearGradient>
                <linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradient-6">
                  <stop stop-color="#9CBEF7" offset="0%" />
                  <stop stop-color="#96D1F7" offset="100%" />
                </linearGradient>
              </defs>
              <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <g id="审批管理-暂无待办事项" transform="translate(-927, -470)">
                  <g id="暂无待办事项" transform="translate(927, 470)">
                    <g id="编组-69备份-3备份-3" fill-rule="nonzero">
                      <path
                        d="M30.4,70.4 C38.3897145,70.4 44.9396432,76.4022329 45.5530639,84.0283112 C45.8323774,84.0092712 46.1150286,84 46.4,84 C53.027417,84 58.4,89.0144112 58.4,95.2 C58.4,101.385589 53.027417,106.4 46.4,106.4 C46.1313282,106.4 45.8647188,106.391759 45.6004459,106.375534 L45.6,107.2 L8.8,107.2 L8.80006856,105.99739 C3.72613437,104.690379 0,100.351322 0,95.2 C0,89.0144112 5.372583,84 12,84 C13.1159648,84 14.1963502,84.1421776 15.2214963,84.4081848 C15.6437054,76.6027782 22.2779069,70.4 30.4,70.4 Z"
                        id="形状结合备份"
                        fill="url(#linearGradient-1)"
                      />
                      <path
                        d="M174.4,35.2 L174.400166,35.1009906 C168.085987,34.3137074 163.2,28.9274454 163.2,22.4 C163.2,15.3307552 168.930755,9.6 176,9.6 C177.223344,9.6 178.406604,9.77161808 179.527019,10.0920919 C181.87653,4.17968127 187.650157,0 194.4,0 C202.141022,0 208.598072,5.49733733 210.080147,12.8010091 C216.449395,12.8415186 221.6,17.8400063 221.6,24 C221.6,30.0561716 216.621551,34.98966 210.40049,35.1934501 L210.4,35.2 L174.4,35.2 Z"
                        id="形状结合"
                        fill="url(#linearGradient-2)"
                        transform="translate(192.4, 17.6) scale(-1, 1) translate(-192.4, -17.6)"
                      />
                      <path
                        d="M242.8,47.2 C247.491543,47.2 251.362882,50.7117164 251.928816,55.249951 C252.214523,55.2167339 252.505192,55.2 252.8,55.2 C256.77645,55.2 260,58.2444637 260,62 C260,65.7555363 256.77645,68.8 252.8,68.8 C252.529676,68.8 252.262831,68.7859302 252.000242,68.7585236 L252,69.6 L229.6,69.6 L229.600068,68.6315132 C226.393652,67.9443906 224,65.2361993 224,62 C224,58.2444637 227.22355,55.2 231.2,55.2 C232.054514,55.2 232.874259,55.3405911 233.634718,55.5986176 C234.040539,50.892793 237.989021,47.2 242.8,47.2 Z"
                        id="形状结合备份-2"
                        fill="url(#linearGradient-3)"
                      />
                      <g id="编组-50" transform="translate(1.6, 76.8)">
                        <ellipse id="椭圆形" fill="url(#linearGradient-4)" cx="131.6" cy="57.6" rx="131.6" ry="57.6" />
                        <g id="编组-46" transform="translate(30.4, 4.8)">
                          <rect id="矩形" fill="#D7E3FF" x="6.4" y="20" width="2.4" height="12" />
                          <path
                            d="M8.4,21.5460356 C25.469423,21.5460356 11.8000002,-1.42108547e-14 8.4,-1.42108547e-14 C4.99999998,-1.42108547e-14 -8.66942296,21.5460356 8.4,21.5460356 Z"
                            id="椭圆形"
                            fill="#EAF0FF"
                          />
                        </g>
                        <g id="编组-46备份-2" transform="translate(218.4, 4.8)">
                          <rect id="矩形" fill="#D7E3FF" x="4.97664" y="13.824" width="1.65888" height="8.2944" />
                          <path
                            d="M5.80608,14.8926198 C17.6044651,14.8926198 8.15616008,-9.8225428e-15 5.80608,-9.8225428e-15 C3.45599989,-9.8225428e-15 -5.99230512,14.8926198 5.80608,14.8926198 Z"
                            id="椭圆形"
                            fill="#EAF0FF"
                          />
                        </g>
                        <g id="编组-46备份" transform="translate(245.6, 21.6)">
                          <rect id="矩形" fill="#D7E3FF" x="3.6" y="10" width="1.2" height="6" />
                          <path
                            d="M4.2,10.7730178 C12.7347114,10.7730178 5.90000008,-7.10542736e-15 4.2,-7.10542736e-15 C2.5,-7.10542736e-15 -4.33471146,10.7730178 4.2,10.7730178 Z"
                            id="椭圆形"
                            fill="#EAF0FF"
                          />
                        </g>
                      </g>
                    </g>
                    <g id="编组-61" transform="translate(89.6, 21.6)">
                      <ellipse id="椭圆形" fill="#E2EBFF" fill-rule="nonzero" cx="42.8" cy="80" rx="42.8" ry="4.8" />
                      <rect id="矩形备份-91" fill="url(#linearGradient-5)" x="5.6" y="0" width="70.4" height="80.8" rx="3.2" />
                      <g id="编组-60" transform="translate(20.8, 28)" fill="#FFFFFF" fill-rule="nonzero">
                        <rect id="矩形" x="0" y="0" width="40" height="3.2" rx="1.6" />
                        <rect id="矩形备份-92" x="0" y="15.2" width="40" height="3.2" rx="1.6" />
                        <rect id="矩形备份-93" x="0" y="30.4" width="40" height="3.2" rx="1.6" />
                      </g>
                      <path
                        d="M21.6,0 L60.7346814,0 L55.7992343,8.40508424 C55.6555754,8.64973584 55.393086,8.8 55.1093744,8.8 L27.225307,8.8 C26.9415954,8.8 26.6791059,8.64973584 26.535447,8.40508424 L21.6,0 L21.6,0 Z"
                        id="矩形"
                        fill="#FFFFFF"
                        fill-rule="nonzero"
                      />
                      <rect id="矩形备份-94" fill="url(#linearGradient-6)" x="29.6" y="0" width="23.2" height="3.2" rx="1.6" />
                    </g>
                  </g>
                </g>
              </g>
            </svg>
            <div class="no-data-msg">暂无数据</div>
          </div>
          <div class="kb-table-box" v-else>
            <a-table :columns="columns" :dataSource="state.dataSource" :scroll="{ x: 'max-content', y: '80vh' }" :pagination="false" :loading="state.tableLoading" bordered>
              <template #headerCell="{ column, title }">
                <div
                  v-if="column.current"
                  style="
                                        width: 100%;
                                        background-color: #ffa940;
                                        height: 100%;
                                        display: flex;
                                        justify-content: center;
                                        align-items: center;
                                    "
                  >{{ title }}</div
                >
                <div v-else>{{ title }}</div>
              </template>

              <template #bodyCell="{ record, text, column, index }">
                <template v-if="['实际进展'].includes(column.title)">
                  <div v-if="record.reached == 'middle'" style="color: #262626">{{ text }}</div>
                  <div v-if="record.reached == true" style="color: #52c41a">{{ text }}</div>
                  <div v-if="record.reached == false" style="color: #ff2a00">{{ text }}</div>
                </template>
                <template v-if="column.current">
                  <div
                    style="
                                            background-color: rgba(255, 169, 64, 0.2);
                                            height: 50px;
                                            line-height: 50px;
                                        "
                    >{{ text }}</div
                  >
                </template>
              </template>
            </a-table>
          </div>
        </div>
      </div>

      <!-- end vid_mcn9x7w7kh 自定义模板_oke8qhhw3i -->
    </a-spin>
  </div>
</template>
<script setup lang="tsx">
  import {
      h, ref, reactive, toRaw, markRaw, watch, computed,
      onBeforeMount, onMounted, onBeforeUnmount, onUnmounted, onActivated, onDeactivated
    } from "vue";
    import { useRoute, useRouter } from 'vue-router';
    const router = useRouter();
    const route = useRoute();
    import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios';
    import { cloneDeep, localGet, merge, getDifferenceArray, traversalTreeStructure, checkCaseCondition, renderStringInTemplate, handleBreadcrumbJump, throttle, permission, getComponentParamsValue } from '@/utils/index';
    import { isNullOrEmpty, isEmptyArr, isNullOrUnDef, isContained, isArray, isEmpty, isObject } from '@/utils/is';
    import dayjs from 'dayjs';
    import { getPagePcChartsDataSourceConvert } from '@/utils/chart';
    import { message, notification, Modal } from 'ant-design-vue'
    import { propertyFormatByNumber, propertyFormatByPercentage, propertyFormatByDate, parseSubFromDataList } from '@/utils/format';
    import colorTheme from '@/design/custom-theme.json';
    
    import UserTableRecords from '@/model/UserTableRecords';
    import { getAppBaseUrl } from '@/utils/index';
    import { sendToken } from "@/hooks/useIframeToken";
    import { useSystemStore } from "@/store/modules/system";
    const systemStore = useSystemStore();
    



      // 获取传入的流程ID和组件参数
      const props = defineProps({
            'processInstanceId': {
            type: [String,Number,Boolean],
            default: undefined,
        },
      })
      const immediateWatch = (source, callback) => {
        watch(source, callback, {deep: true,immediate: true })
      }



  /* -------------------------- 属性定义 -------------------------- */

      const setTimeOutList = [];
      const pageLoading = reactive({
        loading: false,
        tip: undefined
      });
      const authInfo = localGet('app-user-store');




      // 处理校验
      const setSubFormName =(parentInfo, name)=>{
        return [parentInfo.parents, parentInfo.cycleIndex, name];
      }


  /* ========================== 属性定义 ========================== */


  /* -------------------------- 元素数据引用 -------------------------- */


  /* ========================== 元素数据引用 ========================== */


  /* -------------------------- 页面数据 -------------------------- */


  /* ========================== 页面数据 ========================== */



  /* -------------------------- 响应 -------------------------- */

  /* ========================== 响应 ========================== */


  /* -------------------------- 函数 -------------------------- */

  /* ========================== 函数 ========================== */


  /* -------------------------- 页面参数 -------------------------- */

    const pageParameter_state = reactive({
        'processInstanceId': props.processInstanceId ?? route.query.processInstanceId,
    })

  /* ========================== 页面参数 ========================== */


  /* -------------------------- 组件事件处理方法 -------------------------- */

    // ---------------------------- 组件数据同步 ----------------------------

    // ============================ 组件数据同步 ============================


  /* ========================== 组件事件处理方法 ========================== */


  /* -------------------------- 生命周期 -------------------------- */
  // 用于参数变更后重新执行自定义指令
      const queryUpdateFlag = ref(0);
      onMounted(() => { ;

    });

    onUnmounted(() => {
      // 销毁定时器
      setTimeOutList.forEach(({ repeat, timer }) => {
        repeat ?  clearInterval(timer): clearTimeout(timer);
      });
    });

  /* ========================== 生命周期 ========================== */


  /* -------------------------- 数据关联处理 -------------------------- */





  /* -------------------------- 表单数据同步 -------------------------- */
  /* ========================== 表单数据同步 ========================== */

  /* ========================== 数据关联处理 ========================== */


  /* -------------------------- 不同组件自定义的处理逻辑 -------------------------- */

  /* ========================== 不同组件自定义的处理逻辑 ========================== */


  // ================================定制化逻辑========================================
  onMounted(async () => {
          getData()
      })
      const radioStyle = reactive({
          display: 'flex',
          height: '30px',
          lineHeight: '30px'
      })
      const state = reactive({
          exportLoading: false,
          dataSource: [],
          permission: false,
          tableLoading: false
      })
      const tipList = [
          {
              title: '当前时间范围',
              color: '#FFA940'
          },
          {
              title: '达成目标',
              color: '#73D13D'
          },
          {
              title: '未达成目标',
              color: '#F5222D'
          }
      ]
      const customCellStyle = () => {
          return {
              style: {
                  padding: '0'
              }
          }
      }
      const columns = ref([])
      // 获取数据
      function getData() {
          state.tableLoading = true
          post('/solution-ppm/api/v2/built-in-system-ppm/year_goals/search', {
              configAreaId: state.radioValue
          })
              .then(data => {
                  if (data.code !== 200) {
                      state.dataSource = []
                      message.error(data.message)
                      return
                  }
                  columns.value = data.data.dataColumnDtoList
                  columns.value.forEach(item => {
                      item.align = 'center'
                    item.width = '100px'
                      if (item.title == '阶段') {
                          item.width = '250px'
                      }
                      if (item.title.includes('当前计划')) {
                          item.width = '200px'
                      }
                  })

                  state.dataSource = data.data.dataSourceDtoList.map(item => {
                      const { id, milepostName, yearGoalsDataDtoMap } = item
                      const { actualProgress, currentPlan } = yearGoalsDataDtoMap

                      const formattedItem = {
                          id,
                          milepostName,
                          actualProgress: actualProgress.numbers,
                          currentPlan: currentPlan.numbers
                      }

                      Object.keys(yearGoalsDataDtoMap).forEach(key => {
                          if (key !== 'actualProgress' && key !== 'currentPlan') {
                              formattedItem[key] = yearGoalsDataDtoMap[key].numbers
                          }
                      })

                      if (currentPlan.numbers == 0 && actualProgress.numbers == 0) {
                          formattedItem.reached = 'middle'
                      } else {
                          formattedItem.reached = currentPlan.reached
                      }

                      return formattedItem
                  })
              })
              .finally(() => {
                  state.tableLoading = false
              })
      }
</script>
<style lang="less" scoped>
  .page_root {
  width: 100%;
  height: 100%;
  overflow: auto;
  }
  .page_root :deep(.@{ant-prefix}-spin-nested-loading),
  .page_root :deep(.@{ant-prefix}-spin-container)
   {
      height: 100%;
  }
  .page_root :deep(.@{ant-prefix}-spin-container .@{ant-prefix}-table-wrapper)
   {
      display: flex;
      flex-flow: column nowrap;
      justify-content: flex-start;
  }
  .page_root :deep(.@{ant-prefix}-table)
   {
    flex: auto;
    overflow: auto;
  }
  .table-moreBtn_down {
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 100px;
  }

  .table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
    background: #ebf1ff;
  }

  /*  表格树结构样式处理，展开按钮层级增加*/
  :deep(.@{ant-prefix}-table-row-expand-icon) {
    z-index: 1;
  }
  /*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
  :deep(.@{ant-prefix}-table-row-level-1 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 15px !important;
    width: calc(100% - 15px);
  }
  :deep(.@{ant-prefix}-table-row-level-2 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 30px !important;
    width: calc(100% - 30px);
  }
  :deep(.@{ant-prefix}-table-row-level-3 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 45px !important;
    width: calc(100% - 45px);
  }
  :deep(.@{ant-prefix}-table-row-level-4 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 60px !important;
    width: calc(100% - 60px);
  }

  /* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
  :deep(.@{ant-prefix}-transfer-list)
   {
      height: 100%;
      width: 50%;
  }


  /*样式*/

      .body {
          background-color: #f0f2f5;
          height: 100%;
      }
      .top-tab {
          height: 65px;
          padding: 16px 24px;
          background-color: #fff;
          margin-bottom: 16px;
          border-radius: 2px;
      }
      .kb-table-box {
          padding: 0 24px;
          border-radius: 2px;
          background-color: #fff;
      }
      .time-div {
          display: flex;
          flex-direction: column;
          height: 65px;
      }
      .reality-time,
      .plan-time {
          height: 32px;
          width: 100%;
          text-align: center;
          line-height: 32px;
      }
      .plan-time {
          border-bottom: 1px solid #d9d9d9;
      }
      .kb-table-box:deep(.@{ant-prefix}-table-thead) > tr > th {
          background: rgba(56, 117, 255, 0.2);
          color: #262626;
          font-weight: 600;
          padding: 0;
          height: 40px;
          border-right: 1px solid #d9d9d9 !important;
      }

      .kb-table-box :deep(.@{ant-prefix}-table-tbody) tr > td {
          font-size: 14px;
          font-family: arial, helvetica, 'microsoft yahei';
          font-weight: 400;
          color: #262626;
          border-bottom: 1px solid #d9d9d9;
          padding: 0px 0px;
          word-break: break-all;
          background-color: #fafafa;
      }

      .record-top,
      .record-bottom {
          display: flex;
          height: 32px;
      }
      .record-top {
          border-bottom: 1px solid #d9d9d9;
      }
      .extension,
      .normal,
      .planning {
          width: 25%;
          height: 32px;
          background-color: orange;
      }
      .normal {
          background-color: normal;
      }
      .planning {
          background-color: planning;
      }
      .table-tip {
          background-color: #fff;
          display: flex;
          height: 45px;
          justify-content: space-between;
          padding: 0 24px;
          align-items: center;
          margin-bottom: 16px;
      }

      .finish,
      .running,
      .daily {
          display: flex;
          line-height: 62px;
          margin-right: 13px;
      }

      .left-top {
          height: 42px;
          display: flex;
          justify-content: start;
          background: #f6f6f6;
          border-radius: 4px;
          padding: 8px 16px;
      }

      .right {
          flex: 1;
          display: flex;
          justify-content: end;
      }

      .tip-msg {
          font-family: PingFangSC-Regular;
          font-size: 14px;
          color: #262626;
          letter-spacing: 0;
          font-weight: 400;
          margin-right: 8px;
      }

      .running-box {
          background: #aae56a;
      }

      .daily-box {
          background: #faba32;
      }
      .main {
          height: 100%;
          background-color: #fff;
          padding-top: 24px;
          border-radius: 4px;
      }
      .color-father {
          width: 100px;
          display: flex;
          align-items: center;
          justify-content: space-between;
      }
      .no-margin {
          margin: 0;
      }
      .region-title {
          height: 26px;
          background: #fef0cc;
          border-radius: 2px;
          padding-left: 6px;
          font-size: 12px;
          color: #595959;
          line-height: 26px;
          font-weight: 400;
          margin-bottom: 16px;
      }
      .no-data-img {
          width: 264px;
          height: 192px;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
      }
      .no-data-msg {
          position: absolute;
          top: 60%;
          left: 50%;
          transform: translate(-50%, -50%);
          color: #595959;
      }
      .right-top {
          width: 30%;
          display: flex;
          align-items: center;
          justify-content: end;
      }
      .tip-top-box {
          padding: 0 5px;
          border-radius: 2px;
          color: #fff;
          font-weight: 800;
      }
      .text-line-div {
          text-decoration: underline;
      }
      .tip1 {
          margin-left: 24px;
          display: flex;
          align-items: center;
      }
      .box1 {
          width: 32px;
          height: 8px;
          margin-left: 8px;
      }
      .tip-title {
          font-size: 14px;
          color: #262626;
          letter-spacing: 0;
          font-weight: 400;
          line-height: 26px;
          display: flex;
          gap: 2px;
      }
      .title-font {
          font-size: 14px;
          color: #595959;
          letter-spacing: 0;
          text-align: center;
          font-weight: 400;
      }
      .title-weight {
          font-size: 18px;
          color: #262626;
          letter-spacing: 0;
          line-height: 26px;
          font-weight: 500;
          font-family: PingFangSC-Medium;
      }
      .svg-icon {
          position: relative;
          top: 5px;
      }
</style>